<template>
  <div class="cus_tableHead">
      <el-table
            :data="tableInfo.dataList"
            v-show="!loading"
            ref="meshTable"
          >
            <!-- @sort-change="tableSort" -->
            <!-- @select="tableSelect"
            @select-all="tableSelectAll" -->
            <el-table-column
              align="center"
              type="selection"
              width="50"
            ></el-table-column>
            <template v-for="(item, index) in tableInfo.dataList_colume">
              <el-table-column
                v-if="item.value_type != 0 && item.fileld_state"
                :key="item.field_key + item.field_top + index"
                :align="get_align(item.key)"
                :label="item.description"
                :width="get_column_width(item.key)"
                :prop="item.key"
              >
                <!-- :sortable="(item.key=='create_time')||(item.key=='uptime')?'custom':false" -->
                <template slot="header">
                  <span v-if="item.field_key == 'uptime'"
                    >{{ item.description }}

                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="This is calculated using heartbeats"
                      placement="top"
                    >
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </span>
                  <span v-else-if="item.field_key == 'internet_access'"
                    >{{ item.description }}

                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="This will turn off the internet to the network but not your access"
                      placement="top"
                    >
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </span>
                  <span v-else>{{ item.description }}</span>
                </template>
                <template slot-scope="scope">
                  <span v-if="item.key == 'internet_access'">
                    <el-switch
                      @change="
                        setNetwork(scope.row, scope.row[item.key], scope.$index)
                      "
                      v-model="scope.row[item.key]"
                      :active-value="0"
                      :inactive-value="1"
                      active-color="#C95C3D"
                      inactive-color="#DDDDDD"
                    ></el-switch>
                  </span>
                  <span
                    v-else-if="item.key == 'uptime'"
                    @click="showActivity(scope.row)"
                    :style="[
                      {
                        color:
                          scope.row.mesh_online == 'Offline'
                            ? '#666'
                            : '#52C41B',
                      },
                    ]"
                    style="cursor: pointer; display: block"
                  >
                    {{ getUpTime(scope.row[item.key]) }}
                    {{
                      scope.row["mesh_online"] == "Offline" &&
                      getUpTime(scope.row[item.key]) !== "-"
                        ? "ago"
                        : ""
                    }}
                  </span>
                   <span v-else-if="speedArr.length>0 && (item.field_key == 'upload'||item.field_key == 'download')">
                    {{scope.row[item.key]?scope.row[item.key]:"-"}}
                  </span>
                  <span
                    v-else
                    v-html="get_key_value(item.key, scope.row[item.key])"
                  ></span>
                </template>
              </el-table-column>
            </template>
            <el-table-column
              align="center"
              fixed="right"
              :label="$generateTitle('table.operation')"
              width="290"
            >
              <template slot="header">
                <set-table-head-entry
                  :title="'Action'"
                  @didClickMenus="didClickMenus"
                ></set-table-head-entry>
                <!-- <div id="sth-btn-icon-wrap">
                <span>Action</span>
                <i class="sth-btn-icon" @click.stop="didClickMenus">Columns Custom</i>
              </div> -->
                <!-- Action -->
              </template>
              <template slot-scope="scope">
                <div class="op-wrap">
                  <el-button
                    type="info"
                    v-has="{ role: [`networks:del`] }"
                    size="mini"
                    class="del-btn"
                    icon="el-icon-circle-close"
                    @click="delNetwork(index, scope.row)"
                    >Delete</el-button
                  >
                  <el-button
                    type="info"
                    v-has="{ role: [`networks:view`] }"
                    size="mini"
                    icon="el-icon-user"
                    @click="showDetail(index, scope.row)"
                    :disabled="scope.row['mesh_online'] == 'Unbound'"
                    :class="[
                      scope.row['mesh_online'] == 'Unbound' ? 'disabled' : '',
                    ]"
                    >{{ $generateTitle("table.detail") }}</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <div slot="empty">
              <img src="@/assets/images/empty.png" />
            </div>
          </el-table>
  </div>
</template>

<script>

import SetTableHead from "@/components/set_table_head/SetTableHead";
import SetTableHeadEntry from "@/components/set_table_head/SetTableHeadEntry";
export default {
  data:{
    return{

    }
  },
  components:{
    SetTableHead,
    SetTableHeadEntry,
  },
  methods:{
      didClickMenus() {
      this.isShow = true;
      var right = document.querySelector(
        "#sth-btn-icon-wrap .sth-btn-icon"
      ).offsetWidth;
      var icon = document.querySelector(".sth-btn-icon");
      var icony = icon.getBoundingClientRect().top;
      var iconx = icon.getBoundingClientRect().right;
      // console.log(iconx,icony);
      let headList = document.querySelector("#sth-btn");
      headList.style.right = right + "px";
      headList.style.top = icony + 24 + "px";
    },
  }
}
</script>

<style>

</style>